<template>
  <button class="as-button"
          @click="handlerClick"
          :class="[
            {
              'is-round':round,
              'is-circle':circle,
              'is-dashed':isDashed,
              'is-border':isBorder,
              'is-disabled':isDisabled||loading,
              'is-text':text
            },
            buttonType?'as-button--'+buttonType:'',
            buttonSize?'as-button--'+buttonSize:''
          ]">
    <span>
      <i :class="asIcon"
         v-if="icon||loading"></i>
      <span v-if="$slots.default">
        <slot></slot>
      </span>
    </span>
  </button>
</template>

<script type='text/ecmascript-6'>
export default {
  name: "AsButton",
  inject: {
    asButtonGroup: {
      default: ""
    }
  },
  props: {
    type: {
      type: String,
      default: null
    },
    disabled: Boolean,
    border: Boolean,
    dashed: Boolean,
    circle: Boolean,
    round: Boolean,
    size: {
      type: String,
      default: null
    },
    text: Boolean,
    icon: String,
    loading: Boolean
  },
  computed: {
    asIcon() {
      if (this.loading) {
        return "el-icon-loading";
      } else {
        return this.icon;
      }
    },
    buttonSize() {
      return this.size || this.asButtonGroup.size;
    },
    buttonType() {
      return this.type || this.asButtonGroup.type;
    },
    isBorder() {
      return this.border || this.asButtonGroup.border;
    },
    isDashed() {
      return this.dashed || this.asButtonGroup.dashed;
    },
    isDisabled() {
      return this.disabled || this.asButtonGroup.disabled;
    }
  },
  data() {
    return {};
  },
  methods: {
    handlerClick() {
      this.$emit("click");
    }
  }
};
</script>
